import React from 'react';
import {Input} from 'antd';
import {useImmerState} from '../hooks/useImmerState';
import ImgUploader from './imgUpload';
import {eventBusPromise as eventBus} from '../helpers/eventBus';
import useDidUpdate from '../hooks/useDidUpdate';

const SchoolEditor = (props) => {
  const {school, onConfirm} = props;
  const [state, setState] = useImmerState({
    name: school?.name || '',
    city: school?.city || '',
    logo: school?.logo || '',
  });

  useDidUpdate(() => {
    const callback = async () => {
      await onConfirm(state);
    };
    eventBus.on('schoolEditConfirm', callback);
    return () => {
      eventBus.off('schoolEditConfirm', callback);
    };
  }, [state]);

  return (
    <div>
      <div>学校名称：<Input
        style={{margin: '10px 0'}}
        placeholder="输入高校名称"
        onChange={e => {
          const val = e.target.value;
          setState(draft => {
            draft.name = val;
          });
        }
        }
        value={state.name}/>
      </div>
      <div>城市：<Input
        style={{margin: '10px 0'}}
        placeholder="输入高校所在城市"
        onChange={e => {
          const val = e.target.value;
          setState(draft => {
            draft.city = val;
          });
        }}
        value={state.city}/>
      </div>
      <div>Logo：<ImgUploader
        onUploaded={(imgUrl) => {
          setState(draft => {
            draft.logo = imgUrl;
          });
        }}
        logo={state.logo}/></div>
    </div>
  );


};

export default SchoolEditor;